<template>
  <div class="container">
    <div class="login-box">
      <div class="login-box-head">
        <p>ip地址管理系统</p>
        <span>让你的管理更轻松</span>
      </div>
      <div class="login-box-body">
        <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="60px">
          <el-form-item label="账号" prop="username">
            <el-input v-model="loginForm.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="loginForm.password"></el-input>
          </el-form-item>
          <el-form-item>
            <div class="loginButton">
              <el-button type="primary" size="small" @click="login">登录</el-button>
              <el-button size="small" @click="resetForm">重置</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div class="login-box-foot"></div>
    </div>
    <div class="copy">Copyright &copy; 华雁智能科技（集团）股份有限公司</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginForm: {
        username: 'admin',
        password: '123456'
      },
      loginFormRules: {
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  created() {},
  methods: {
    login() {
      console.log(this.loginForm)
      this.$refs.loginFormRef.validate(async (valid) => {
        console.log(valid)
        if (!valid) return
        const that = this
        const { data: res } = await this.$http({
          method: 'post',
          url: 'api/login',
          data: this.loginForm,
          transformRequest: [
            function (data) {
              let ret = ''
              for (const it in data) {
                ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
              }
              ret = ret.substring(0, ret.lastIndexOf('&'))
              return ret
            }
          ],
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).catch(function (error) {
          if (error.response.status === 401) {
            that.$message.error('登录失败！')
          }
        })
        sessionStorage.removeItem('token')
        sessionStorage.setItem('token', res.token_type + ' ' + res.access_token)
        this.$message.success('登陆成功！')
        this.$router.push('/main')
      })
    },
    resetForm() {
      this.$refs.loginFormRef.resetFields()
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  height: 100%;
  background: url(https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture) no-repeat left center;
}
.login-box {
  background-color: #f0f0f0;
  opacity: 0.8;
  width: 300px;
  height: 300px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  box-shadow: #c0c0c0 0px 0px 10px;
  .login-box-head {
    height: 20%;
    p {
      font-family: Verdana, Geneva, sans-serif;
      font-size: 16px;
      font-weight: bold;
      text-align: center;
    }
    span {
      font-family: 'Comic Sans MS', cursive, sans-serif;
      margin-left: 50%;
    }
  }
  .login-box-body {
    height: 60%;
    .el-form {
      margin-top: 10px;
    }
  }
  .login-box-foot {
    height: 20%;
  }

  .el-form-item {
    margin-right: 30px;
  }
  .loginButton {
    margin-left: 30px;
  }
}
.copy {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translate(-50%);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
}
</style>
